<template>
	<div>
		<div v-if="showSteps">
			<el-steps class="steps" :active="active" finish-status="success">
				<el-step :title="flowItem" v-for="flowItem in flows" />
			</el-steps>
		</div>
		<div style="width: 80%; margin: 0 auto">
			<baseInfo
				@nextStep="handleStepToMainPlan"
				v-if="currentCreateStep == 0"
				@toggleStepsVisible="toggleStepsVisible"
			/>
			<mainPlanConfig
				v-if="currentCreateStep == 1"
				:projectName="projectBaseInfo.name"
				@createSubtask="createSubtask"
			/>

			<subTask v-if="currentCreateStep == 2" />
		</div>
	</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import baseInfo from './baseInfo.vue';
import mainPlanConfig from './mainPlanConfig.vue';
import subTask from './subTask/subTask.vue';
const active = ref(0);

const flows = reactive(['项目立项', '设计研发', '生产制造', '装配测试', '物流发运', '现场安装']);

const currentCreateStep = ref(0);

let projectBaseInfo = reactive({ name: '' });

const showSteps = ref(true);

const toggleStepsVisible = visible => {
	showSteps.value = visible;
};

/**
 * 进入项目主计划配置
 * @param baseInfo
 */
const handleStepToMainPlan = baseInfo => {
	currentCreateStep.value++;

	projectBaseInfo = baseInfo;
};

const createSubtask = () => {
	currentCreateStep.value = 2;
	showSteps.value = true;
	active.value = 1;
};
</script>
<style lang="scss" scoped>
.steps {
	max-width: 80%;
	margin: 20px auto;
}
</style>
